<template>
  <div class="content">
    <div class="page_header mb20">小程序备案流程</div>
    <div class="placeholder9">需要在本系统内填写备案信息</div>
    <div class="primaryColor pointer mt20" @click="miniDocument">(微信官方文档：小程序备案操作指引)</div>
    <div class="flow_wrap">
      <img src="@/assets/images/ic_beian.png" alt="">
    </div>
    <div class="btn_wrap">
      <el-button v-for="item in shopMiniList" :key="item.id" type="primary mr30" @click="write(item)">{{ item.appType == '0' ? '填写会员小程序备案信息' : '填写运营小程序备案信息' }}</el-button>
    </div>
  </div>
</template>

<script>
import {
  miniRecordShopsList,
} from '@/api'
export default {
  data() {
    return {
      shopMiniList: []
    }
  },
  created() {
    this.getShopMiniList()
  },
  methods: {
    miniDocument() {
      window.open('***************')
    },
    write(row) {
      if (row.isHasIcpInfo === '1') {
        this.$message.warning('该备案信息已提交，请先前往备案管理编辑')
        return this.$emit('changeTab')
      }
      this.$router.push({
        name: 'RecordWeChatEdit',
        query: {
          appId: row.appId,
          appName: row.appName,
          isHasIcpInfo: row.isHasIcpInfo || '0'
        }
      })
    },
    getShopMiniList() {
      miniRecordShopsList({param: {
      }}).then(res => {
        this.shopMiniList = res.recordList
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.page_header{
  margin-top: 40px;
  font-size: 24px;
  font-weight: 600;
  color: #222222;
  line-height: 33px;
}
.content {
  text-align: center;
}
.flow_wrap{
  margin-top: 60px;
  margin-bottom: 60px;
  img{
    width: 100%;
  }
}
</style>
